<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
        事件是一种用户行为浏览器执行的内容 我们也称为监听 针对的写一些监听的代码 当你做了某件事
        浏览器会执行一定的操作
        比如：鼠标移入到某个元素上 它变色 

        事件的使用：(绑定事件)
        -   <div id="box" onclick="">666</div>  在标签中使用onXXX="操作"
        -   对象.事件名=function(){操作}


        常见的事件：
        onclick    鼠标单击事件
        onblur     元素失去光标
        onfocus    元素获得光标
        onload     页面加载完毕
        onsubmit   表单提交触发
        onmouseover 鼠标移动到某元素上
        onmouseout  鼠标移开某元素
        onchange    当html内容发生改变触发


        */

        //当浏览器窗口(文档内容)加载完毕以后执行代码
        window.onload = function () {
            var box = document.querySelector("#box");
            //alert(box);


            //为box绑定单击事件
            box.onclick = function () {
                box.style.backgroundColor = "red";
            }

            box.onmouseover = function () {
                box.style.fontSize = "500px";
                box.style.color = "pink";
            }

            box.onmouseout = function () {
                box.style.fontSize = "11px";
                box.style.color = "green";
            }

        }




    </script>
</head>

<body>

    <div id="box" onclick="">666</div>

</body>

</html>